<template>
  <!-- 患者管理 -->
  <view class="question-list">
    <view class="question-list__item" v-for="(item, index) in list" :key="index">
      <view class="question-list__content">
        <pane-card>
          <view slot="title">
            <view class="header">
              <text class="right">
                <text class="name">
                  {{item.name}}
                </text>
                <text class="nl">
                  {{item.time}}
                </text>
              </text>
            </view>

          </view>
          <view slot="subtitle">
            <view class="content">
              <text class="label block">
                <text class="txt">{{item.content}}</text>
              </text>
              <!-- <text class="label block">
                <m-icon color="#666666" type="phone" @click="clear"></m-icon>
                <text class="txt">{{item.phone}}</text>
              </text> -->
            </view>
          </view>
        </pane-card>
      </view>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import Api from '@/api/main'
  import PaneCard from '@/components/m-card/pane-card.vue';
  import VEmpty from '@/components/v-empty/index.vue';
  import MIcon from '@/components/m-icon/m-icon.vue'
  export default {
    components: {
      VEmpty,
      MIcon,
      PaneCard
    },
    data() {
      return {
        lbid: '',
        code: '',
        showEmpty: false,
        list: [
          {
            name: '问卷一',
            content: '异常异常异常异常',
            time: '2022.01.13'
          }
          // {
          //   id: 1,
          //   name: '张三1',
          //   nl: 31,
          //   xb: '男',
          //   sfzh: '1231512312312',
          //   phone: 12345678
          // },
          // {
          //   id: 2,
          //   name: '张三2',
          //   nl: 31,
          //   xb: '男',
          //   sfzh: '153473453234234',
          //   phone: 12345678
          // },
          // {
          //   id: 3,
          //   name: '张三3',
          //   nl: 31,
          //   xb: '男',
          //   sfzh: '45748125463',
          //   phone: 12345678
          // },
          // {
          //   id: 4,
          //   name: '张三4',
          //   nl: 31,
          //   xb: '男',
          //   sfzh: '8754564122312321',
          //   phone: 12345678
          // }
        ]
      }
    },
    methods: {
      goto(url) {
        uni.navigateTo({
          url: url
        })
      },
      async getList() {
        const res = await this.$http.post(Api.listQuestionnaireResults, { code: this.code })
        this.list = res || []
        this.showEmpty = !this.list.length;
        console.log('showEmpty', this.showEmpty);
        return res
      },
    },
    onLoad({ code }) {
      this.code = code
    },
    async onShow() {
      uni.showLoading({
        title: '加载中'
      });
      await this.getList()
      uni.hideLoading();
    }
  }
</script>
<style lang="scss">
  .question-list {
    width: 100%;
    padding: 0 40rpx;

    .header {
      // height: 70rpx;
      display: flex;
      justify-content: space-between;

      .nl {
        margin-left: 20rpx;
        color: $uni-text-color-grey;
      }

      .btn {
        color: $uni-color-primary;
        font-weight: 400;
      }
    }

    .operate {
      display: flex;
      align-items: center;

      .operate-btn {
        margin-left: 20rpx;
      }
    }

    .home {
      font-size: 38rpx;
    }

    .footer {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 2.5;

        &-icon {
          width: 60rpx;
          height: 60rpx;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: #fff;

          &.primary {
            background-color: $uni-color-primary;
          }

          &.success {
            background-color: $uni-color-success;
          }

          &.warning {
            background-color: $uni-color-warning;
          }

          &.error {
            background-color: $uni-color-error;
          }
        }

        text {
          font-size: 26rpx;
        }
      }

      .content {
        width: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .txt {
      margin-left: 10rpx;
    }
  }
</style>